<template>
  <div class="sharp" @mousedown="handleMouseDown">
    <slot></slot>
  </div>
</template>

<script setup>
  const props = defineProps({
    originalStyle: Object
  })

  const throttle = (fn, delay = 50) => {
    let timer = null
    return (...args) => {
      if (timer) return
      timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null

        fn(...args)
      }, delay)
    }
  }

  const handleMouseDown = e => {
    e.stopPropagation()
    e.preventDefault()

    const startX = e.clientX
    const startY = e.clientY

    const originalPos = props.originalStyle

    const startTop = Number(originalPos.top)
    const startLeft = Number(originalPos.left)

    const move = throttle(me => {
      const curX = me.clientX
      const curY = me.clientY
      originalPos.top = curY - startY + startTop
      originalPos.left = curX - startX + startLeft
    })

    const up = () => {
      document.removeEventListener('mousemove', move)
      document.removeEventListener('mouseup', up)
    }

    document.addEventListener('mousemove', move)
    document.addEventListener('mouseup', up)
  }
</script>

<style lang='scss' scoped>
.sharp {
  position: absolute;
  &:hover {
    cursor: move;
  }
}
</style>



<!-- <template>
      <div class="sharp" @mousedown='handleMouseDown'>
        <slot></slot>
      </div>
</template>

<script setup>
const props = defineProps({
  originalStyle:Object
})

console.log(props.originalStyle)

const throttle = (fn,delay = 100)=>{
    let timer = null
    return (...args)=>{
      if(timer) return 
      timer = setTimeout(()=>{
        clearTimeout(timer)
        timer = null

        fn(...args)
      },delay)
    }
  }

  const handleMouseDown=e=>{
    console.log(e)
    e.stopPropagation();
    e.preventDefault();

    const startX = e.clientX
    const startY = e.clientY

    const originalPos = props.originalStyle


    const startTop = Number(originalPos.top)
    const startLeft = Number(originalPos.left)

    console.log(startTop)

    const move = throttle(me =>{
         const curX = me.clientX
         const curY = me.clientY

         originalPos.top = curY-startY+startTop
         originalPos.left = curX-startX+startLeft
    })

    const up = ()=>{
      document.removeEventListener('mousemove',move)
      document.removeEventListener('mouseup',up)
    }

    document.addEventListener('mousemove',move)
    document.addEventListener('mouseup',up)
  }
  

</script>

<style lang="scss" scoped>
  .sharp{
      position: absolute;
      &:hover{
          cursor:move;
      }
  }
</style> -->